<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单相关</title>
  <script>
    function $(id) {
      return document.getElementById(id);
    }

    function init() {
      $('isName').addEventListener('change',textName_blur,false);
    }

    function textName_blur(){
      var value = $('isName').value;
      if(value.length == 0){
        $('isName').setCustomValidity('用户名不能为空');
      }else{
        $('isName').setCustomValidity('');
      }
    }

    window.addEventListener('load',init,false);
  </script>
</head>
<body>
<form method="get">
  <table>
    <tr>
      <td>用户名称：</td>
      <td>
        <input type="text" id="isName" name="txtName" required>
        <small></small>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center"><input type="submit"></td>
    </tr>
  </table>
  <a download href="/downloads/offline.zip">offline version</a>
  <a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
  <ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
  <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
</form>

<!--  ================================================================== -->
方法
  1. setCustomValidity 添加错误提示，不需要时要清除错误消息 setCustomValidity('')
  2. checkValidity() 强制要求在脚本中对元素进行验证

验证事件  invalid  给表单添加在，提交时会触发，会找到错误的元素
  example: document.information.addEventListener("invalid",func,true);  必须在捕获阶段执行
  获取引发错误的元素，func(e){ e.target }

新属性
  ValidityState 属性    通过validity属性获取  语法：var check = ele.validity
  状态
    ele.validity.valid 验证是否通过
    ele.validity.valueMissing 判断是否为空
    ele.validity.typeMismatch 类型格式不正确
    ele.validity.patternMismatch 不匹配正则
    ele.validity.tooLong 内容长度
    ele.validity.rangeUnderflow 小于min
    ele.validity.customError 自定义的错误 setCustomValidity





</body>
</html>
